/**
 * Created by apple on 2018/6/11.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native';
import Accordion from 'react-native-collapsible/Accordion';
import {Col, Row, Grid} from "react-native-easy-grid";
import {inject} from 'mobx-react'

const SECTIONS = [
  {
    title: 'First',
    content: 'Lorem ipsum...'
  },
  {
    title: 'Second',
    content: 'Lorem ipsum...'
  }
];

@inject('GStore')
export default class AccordionView extends Component {
  componentDidMount() {
    console.log(this.props.GStore.categoryList)
  }

  // _renderSectionTitle(section) {
  //   return (
  //     <View style={styles.content}>
  //       <Text>{section.content}</Text>
  //     </View>
  //   );
  // }

  _renderHeader(section) {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>{section.name}</Text>
      </View>
    );
  }

  _renderContent(section) {
    let array = [];
    let len = Math.ceil(section.list.length / 5);
    for(let i = 0;i<len;i++){
      let arr = [];
      for(let j = i*5;j<(i+1)*5;j++){
        if(section.list[j])
          arr.push(section.list[j])
      }
      array.push(arr)
    }

    console.log(array);
    return (
      <View style={styles.content}>
        {array.map((items,index2) =>{
          return(
            <Grid key={index2}>
              {
                items.map((item, index) => {
                  return (
                    <Col key={index} style={styles.col} onPress={this.getCategory.bind(this, section.parentId)}>
                      <Text style={styles.colText}>{item.name}</Text>
                    </Col>
                  )
                })
              }

            </Grid>
          )
        })}
      </View>
    );
  }

  getCategory(parentId) {
    console.log(parentId)
  }

  render() {
    return (
      <Accordion
        sections={new Array(...this.props.GStore.categoryList)}
        renderHeader={this._renderHeader.bind(this)}
        renderContent={this._renderContent.bind(this)}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF'
  },
  title: {
    textAlign: 'center',
    fontSize: 22,
    fontWeight: '300',
    marginBottom: 20
  },
  header: {
    backgroundColor: '#F5FCFF',
    padding: 10
  },
  headerText: {
    textAlign: 'left',
    fontSize: 16,
    fontWeight: '500'
  },
  content: {
    padding: 20,
    backgroundColor: '#fff'
  },
  active: {
    backgroundColor: 'rgba(255,255,255,1)'
  },
  inactive: {
    backgroundColor: 'rgba(245,252,255,1)'
  },
  selectors: {
    marginBottom: 10,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  selector: {
    backgroundColor: '#F5FCFF',
    padding: 10
  },
  activeSelector: {
    fontWeight: 'bold'
  },
  selectTitle: {
    fontSize: 14,
    fontWeight: '500',
    padding: 10
  },
  col: {
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'grey',
    height: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
    width:'20%'
  },
  colText: {
    height: 40,
    lineHeight: 40,
  }
});